<template>
  <div class="about">
    <el-card class="about-card">
      <template #header>
        <div class="card-header">
          <h1>关于七鱼AI助手</h1>
        </div>
      </template>

      <div class="about-content">
        <section class="intro-section">
          <h2>项目介绍</h2>
          <p>
            七鱼AI助手是一个基于七鱼大模型平台开发的智能对话应用。本项目旨在为用户提供便捷、智能的AI对话服务，让更多人能够体验到人工智能技术带来的便利。
          </p>
        </section>

        <section class="tech-section">
          <h2>技术栈</h2>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="前端框架">
              <el-tag>Vue 3</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="UI组件库">
              <el-tag>Element Plus</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="状态管理">
              <el-tag>Pinia</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="路由">
              <el-tag>Vue Router</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="HTTP客户端">
              <el-tag>Axios</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="AI平台">
              <el-tag type="success">百度千帆大模型平台</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </section>

        <section class="features-section">
          <h2>主要功能</h2>
          <el-timeline>
            <el-timeline-item
              v-for="(feature, index) in features"
              :key="index"
              :type="feature.type"
              :color="feature.color"
              :hollow="feature.hollow"
              :timestamp="feature.title"
              placement="top"
            >
              <p>{{ feature.description }}</p>
            </el-timeline-item>
          </el-timeline>
        </section>

        <section class="version-section">
          <h2>版本信息</h2>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="当前版本">
              <el-tag type="success">v1.0.0</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="更新日期"> 2025年5月 </el-descriptions-item>
          </el-descriptions>
        </section>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const features = ref([
  {
    title: '智能对话',
    description: '支持与AI助手进行自然语言对话，获取智能回答和建议',
    type: 'primary',
    color: '#409EFF',
    hollow: true,
  },
  {
    title: '多模型支持',
    description: '集成多个百度千帆大模型，可根据需求选择不同模型',
    type: 'success',
    color: '#67C23A',
    hollow: false,
  },
  // {
  //   title: '对话历史',
  //   description: '保存对话历史，方便查看和继续之前的对话',
  //   type: 'warning',
  //   color: '#E6A23C',
  //   hollow: true,
  // },
  {
    title: '响应式设计',
    description: '适配各种设备屏幕，提供良好的移动端使用体验',
    type: 'info',
    color: '#909399',
    hollow: false,
  },
])
</script>

<style scoped>
.about {
  width: 100%;
  margin: 0;
  padding: 0;
}

.about-card {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  text-align: center;
}

.card-header h1 {
  margin: 0;
  color: #409eff;
  font-size: 1.8rem;
}

.about-content {
  padding: 20px 0;
}

.about-content section {
  margin-bottom: 40px;
}

.about-content h2 {
  color: #303133;
  margin-bottom: 20px;
  font-size: 1.4rem;
  border-bottom: 2px solid #ebeef5;
  padding-bottom: 10px;
}

.intro-section p {
  color: #606266;
  line-height: 1.6;
  text-align: justify;
}

.tech-section .el-tag {
  margin-right: 8px;
}

.features-section .el-timeline {
  padding-left: 20px;
}

.features-section .el-timeline-item__content p {
  color: #606266;
  margin: 0;
}

.version-section {
  margin-bottom: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .card-header h1 {
    font-size: 1.5rem;
  }

  .about-content h2 {
    font-size: 1.2rem;
  }
}
</style>
